<template>
  <div style="background:#F0F0F0;">
    <div class="search-box">
      <div class="search" @click="searchAddress">
        <div class="zan-icon zan-icon-location" style="color: #969696;">{{location}}</div>
      </div>
    </div>
    <!--<button class="zan-btn zan-btn--primary" @click="handleDistance">计算距离</button>-->
    <div class="shop-box" v-for="(item,index) in shops" :key="index" @click="seleteTime(item,index)">
      <div style="display:flex;height: 80px;line-height: 32px;">
        <div style="width:80%;">
          <p style="padding-top:5px;">{{item.name}}</p>
          <p class="shop-address">{{item.address}}</p>
        </div>
        <div style="width:20%;">
          <p v-if="item.distance>=1000" class="shop-distance">{{item.distance/1000}}KM</p>
          <p v-else class="shop-distance">{{item.distance}}m</p>
        </div>
      </div>
      <div v-if="index == activeIndex">
        <p style="font-size:14px;">取单时间：
          <span style="float:right;padding-right:10px;color:red;" @click="shopDetail(item,index)">门店详情
            <span class="zan-icon zan-icon-arrow"></span>
          </span>
        </p>
        <radio-group class="radio-group" @change="radioChange">
          <label class="radio-label">
            <radio value="now" color="red" checked="true" />现在，支付成功后在<label style="color:red;">店内</label>取单
          </label><br>
          <label class="radio-label">
            <picker mode="time" :start="item.begin_time" :end="item.end_time" @change="selectTime">
              <view class="picker">
                <radio value="appoint" color="red" />稍后，预约稍晚时间<label style="color:red;">到店</label>取单
              </view>
            </picker>
          </label>
        </radio-group>
        <div class="btn" @click="goods_list(item)">开始点单</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
import QQMapWX from "@/utils/map";
var qqmapsdk;
qqmapsdk = new QQMapWX({
  key:'K6ZBZ-C3T33-VA33J-YVW4H-IZT37-TGBHD'
});
export default {
  data () {
    return {
      location,
      shops:[],
      activeIndex:'',
      /*time_ranges:['09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','19:30','20:00','20:30','21:00','21:30','22:00'],*/
      orderType:'now'
    }
  },
  computed: {
    ...mapGetters([
      'login_info',
    ]),
  },
  beforeMount() {
    if (!this.login_info || !this.login_info.brand_id) {
      // 用户未授权
      let url = '../user/get_user_info?callback_url=../home/index'
      wx.redirectTo({
        url: url
      })
      return
    }
  },
  methods: {
    /*handleDistance(){
      console.log('11111111111')
      qqmapsdk.calculateDistance({
        from: {
          latitude: 20,
          longitude: 20.6
        },
        to: [{
          latitude: 20,
          longitude: 20.5
        }],
        success: function(res) {
          console.log('success:',res);
        },
        fail: function(res) {
          console.log('fail:',res);
        }
      });
    },*/
    shopDetail(item,index){
      this.$store.dispatch("setShop",item)
      this.$router.push({path: 'shop'})
    },
    selectTime(e){
      let time = e.target.value
      this.$store.dispatch("setOrderTime",time)
    },
    radioChange(e){
      this.orderType = e.target.value
    },
    seleteTime(item,index){
      this.activeIndex = index
    },
    async fetchShops(location){
      let result = await api.findShops({brand_id:this.login_info.brand_id,latitude:location.latitude,longitude:location.longitude})
      if (result.code == 0) {
        this.shops = result.data
        this.$store.dispatch("setShops",result.data)
      }
    },
    goods_list(shop) {
      this.$store.dispatch("setShop",shop)
      //用vuex保存取单类型
      this.$store.dispatch("setOrderType",this.orderType)
      wx.navigateTo({url: 'goods_list'})
    },
    searchAddress(){
      this.getLocation()
      wx.chooseLocation({
        success:(res)=>{
          console.log('res=>',res)
          this.location = res.name
          this.fetchShops(res)
        }
      })
    },
    getLocation(){
      wx.getLocation({
        type: "gcj02",
        success:(res)=>{
          console.log('res=>',res)
          //把位置信息保存到缓存中
          wx.setStorageSync('location',res)
          qqmapsdk.reverseGeocoder({
            location: {
                latitude: res.latitude,
                longitude: res.longitude,
            },
            success:  (res) => {
              this.location = res.result.formatted_addresses.recommend
            },
          });
          this.fetchShops(res)
        },
        fail:(res)=>{
          this.location = '点击这里，获取定位，查找门店'
          wx.showToast({
            title: '定位失败，请重试',
            icon: 'none'
          })
          if (wx.getStorageSync('location')) {
            this.fetchShops(wx.getStorageSync('location'))
          }
        }
      });
    }
  },
  onLoad() {
    this.getLocation()
  }
}
</script>

<style >
.search-box{
  width: 100%;
  height: 52px;
  position: relative;
}
.search{
  position: absolute;
  top: 10px;
  left: 5%;
  border: 1px solid #969696;
  width: 90%;
  padding-left: 5px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  white-space:nowrap;
  text-overflow:ellipsis;
  word-break:break-all;
  overflow:hidden;
}
.shop-box{
  width: 90%;
  background: white;
  padding-left: 15px;
  margin: 5px auto;
  border-radius: 5px;
  border: 1px solid #DBDBDB;
}
.shop-address{
  font-size:15px;
  color:#A3A3A3;
  overflow:hidden;
  word-break:keep-all;
  white-space:nowrap;
  text-overflow:ellipsis;
}
radio{
  transform:scale(0.7);
}
.radio-label{
  font-size: 15px;
  padding-top: 8px;
}
.radio-group{
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn{
  width: 95%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: black;
  color: white;
  border-radius: 6px;
  margin-right: 10px;
  margin-bottom: 15px;
}
.shop-distance{
  font-size:14px;
  color:#A3A3A3;
  padding-top:5px;
  float:right;
  padding-right:10px;
}
</style>
